<template>
  <div class="business-container">
    <!--行内表单-->
    <div class="form-inline-container">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        size="small"
      >
        <el-form-item>
          <el-input
            v-model="formInline.search"
            placeholder="请输入关键字"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-search"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addClick" icon="el-icon-plus"
            >添加</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="delClick" icon="el-icon-delete"
            >批量删除</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!--表格-->
    <div class="table-container" v-loading="loading">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="area_name" label="区域名称" width="200"> </el-table-column>
        <el-table-column prop="area_id" label="区域编号"> </el-table-column>
        <el-table-column prop="area_location" label="经纬度">
          <template #default="scope">
            <div>
              {{ scope.row.area_location.x }}, {{ scope.row.area_location.y }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="created_date" label="创建时间">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="editClick(scope.row)"
              >修改</el-button
            >
            <el-button
              type="danger"
              size="mini"
              plain
              @click="delClick(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="total"
          :current-page="currentPage"
          @current-change="currentChange"
          @prev-click="prevClick"
          @next-click="nextClick"
        >
        </el-pagination>
      </div>
    </div>

    <!--添加-->
    <Add :visible="addVisible" @close="closeAdd"></Add>
  </div>
</template>

<script>
import Add from "./part/Add.vue";
export default {
  components: {
    //添加
    Add,
  },
  data() {
    return {
      //是否正在加载
      loading: false,
      //表单数据
      formInline: {
        //搜索关键字
        search: "",
      },
      //总条数
      total: 500,
      //每页显示条数
      pageSize: 10,
      //当前页数
      currentPage: 1,
      //表格数据
      tableData: [],
      //是否打开添加
      addVisible: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    /**
     * 获取列表
     */
    getData() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 1000);
      this.tableData = [];
      for (
        let i = this.pageSize * (this.currentPage - 1) + 1;
        i < this.pageSize * this.currentPage + 1;
        i++
      ) {
        let d = new Date();
        let item = {
          id: i,
          created_date:
            d.getFullYear() +
            "-" +
            d.getMonth() +
            "-" +
            d.getDate() +
            " " +
            d.getHours() +
            ":" +
            d.getMinutes() +
            ":" +
            d.getSeconds(),
          update_date: "2021-02-24T06:13:41.308Z",
          telphone:
            "138" + Math.floor(Math.random() * (100000000 - 9999999) + 9999999),
          area_address: "深圳福田",
          area_id: "db09edf0-767e-11eb-860f-fba2e5e96391",
          area_location: { x: 114.052087, y: 22.583142 },
          area_name: "福田区域",
        };
        this.tableData.push(item);
      }
    },

    /**
     * 搜索
     */
    onSubmit() {
      console.log("submit!");
    },

    /**
     * 分页切换
     */
    currentChange(e) {
      this.currentPage = e;
      this.getData();
    },

    /**
     * 上一页
     */
    prevClick(e) {
      this.currentPage = e;
      this.getData();
    },

    /**
     * 下一页
     */
    nextClick(e) {
      this.currentPage = e;
      this.getData();
    },

    /**
     * 多选
     */
    handleSelectionChange(e) {
      console.log(e);
    },

    /**
     * 添加
     */
    addClick() {
      this.addVisible = true;
    },

    /**
     * 修改
     */
    editClick(e) {
      this.addVisible = true;
    },

    /**
     * 关闭
     */
    closeAdd(e) {
      this.addVisible = false;
    },

    /**
     * 删除
     */
    delClick(e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="scss">
</style>